<template>
  <div>
    <el-dialog :visible="onOpen" v-if="onOpen" @close="onClose" :title="pageType===1?`新增`:`编辑`">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
          <el-col :span="11">
            <el-form-item label="诊所名称" prop="clinicName">
              <el-input v-model="formData.clinicName" placeholder="请输入诊所名称" clearable
                        :style="{width: '100%'}" :maxlength="64"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="IP地址" prop="clinicIp">
              <el-input v-model="formData.clinicIp" placeholder="请输入IP地址" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="服务器登录名" prop="serverUser">
              <el-input v-model="formData.serverUser" placeholder="请输入服务器登录名" clearable
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="服务器密码" prop="serverPassword">
              <el-input v-model="formData.serverPassword" placeholder="请输入服务器密码" clearable
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="诊所域名" prop="realmName">
              <el-input v-model="formData.realmName" placeholder="请输入诊所域名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="购买时间" prop="creatTime">
              <el-date-picker v-model="formData.creatTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择购买时间" clearable
                              :picker-options="pickerStartOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="到期时间" prop="expireTime">
              <el-date-picker v-model="formData.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择到期时间" clearable
                              :picker-options="pickerEndOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="版本编号" prop="versionInfo">
              <el-input v-model="formData.versionInfo" placeholder="请输入版本编号" clearable
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="所在地区" prop="region">
              <el-input v-model="formData.region" placeholder="请输入所在地区" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入手机号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入详细地址" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="购买版本" prop="versionRefer">
              <el-select v-model="formData.versionRefer" placeholder="请选择购买版本" clearable
                         :style="{width: '100%'}"
              >
                <el-option v-for="(item, index) in mobileOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addClinict, editClinict } from '@/api/allApi.js'

export default {
  components: {},
  props: {
    onOpen: {
      type: Boolean,
      default: false
    },
    pageType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      formData: {
        clinicName: ``,
        clinicIp: ``,
        serverUser: ``,
        serverPassword: ``,
        realmName: ``,
        creatTime: null,
        expireTime: null,
        versionInfo: ``,
        region: ``,
        phone: ``,
        address: ``,
        versionRefer: ``
      },
      pickerStartOptions: {
        disabledDate: (time) => {

          if (this.formData.expireTime !== null) {
            return time.getTime() > new Date(this.formData.expireTime).getTime()
          }
        }
      },
      pickerEndOptions: {
        disabledDate: (time) => {
          if (this.formData.creatTime !== null){
            return time.getTime() < new Date(this.formData.creatTime).getTime()
          }
        }
      },
      mobileOptions: [{
        'label': '免费版',
        'value': '免费版'
      }, {
        'label': '基础版',
        'value': '基础版'
      }, {
        'label': '高级版',
        'value': '高级版'
      }, {
        'label': '豪华版',
        'value': '豪华版'
      }, {
        'label': '尊贵版',
        'value': '尊贵版'
      }],
      rules: {
        clinicName: [{
          required: true,
          message: '请输入诊所名称',
          trigger: 'blur'
        }],
        clinicIp: [{
          required: true,
          message: '请输入IP地址',
          trigger: 'blur'
        }, {
          pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
          message: 'IP地址格式错误',
          trigger: 'blur'
        }],
        serverUser: [{
          required: true,
          message: '请输入服务器登录名',
          trigger: 'blur'
        }],
        serverPassword: [{
          required: true,
          message: '请输入服务器密码',
          trigger: 'blur'
        }],
        realmName: [{
          required: true,
          message: '请输入诊所域名',
          trigger: 'blur'
        }],
        creatTime: [{
          required: true,
          message: '请选择购买时间',
          trigger: 'change'
        }],
        expireTime: [{
          required: true,
          message: '请选择到期时间',
          trigger: 'change'
        }],
        versionInfo: [{
          required: true,
          message: '请输入版本编号',
          trigger: 'blur'
        }],
        region: [{
          required: true,
          message: '请输入所在地区',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入详细地址',
          trigger: 'blur'
        }],
        versionRefer: [{
          required: true,
          message: '请选择购买版本',
          trigger: 'blur'
        }]
      }
    }
  },
  computed:
      {}
  ,
  watch: {}
  ,
  created() {
  }
  ,
  mounted() {

  }
  ,
  methods: {
    onClose() {
      this.$emit('closeDialog')
      this.formData = {
        creatTime: null,
        expireTime: null
      }
    }
    ,
    handleConfirm() {

      this.$refs.elForm.validate(async(valid) => {
        if (valid) {
          /**
           * 新增
           */
          if (this.pageType === 1) {
            const res = await addClinict(this.formData)
            if (res.code === 200) {
              this.$emit('closeDialog')
              this.$emit('initList')
              this.$message.success('保存成功')
            } else {
              this.$message.error(res.msg)
            }
          } else {
            /**
             * 编辑
             */
            console.log(this.formData)
            const res = await editClinict(this.formData)
            if (res.code === 200) {
              this.$emit('initList')
              this.$emit('closeDialog')
              this.$message.success('保存成功')
              this.formData = {
                creatTime: null,
                expireTime: null
              }
            } else {
              this.$message.error(res.msg)
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })

    }

  }
}

</script>
<style>
</style>
